<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 头部 -->
        <el-row type="flex" justify="space-between" class="historyTitle">
          <div class="content">员工历史归档</div>
          <el-date-picker
            v-model="year"
            year
            clearable
            type="year"
            placeholder="选择年"
            class="chooseYear"
            @change="clooseYear"
          />
        </el-row>

        <!-- 折叠面板 -->
        <el-collapse v-if="historyList.length >0" v-model="activeNames" accordion @change="getArchivingCont">
          <el-collapse-item
            v-for="item in historyList"
            :key="item.id"
            :name="item.id"
            class="collapseItem"
          >
            <template slot="title" class="q">
              <el-row
                type="flex"
                justify="space-between"
                style="width: 100%; padding: 0 20px;"
              >
                <el-row>
                  <div class="reportRow">
                    <span>{{ item.archiveYear }}-{{ item.archiveMonth }}月员工报表</span>
                    <span>考勤统计</span>
                  </div>
                </el-row>
                <el-row style="display:flex">
                  <div class="reportRow">
                    <span>总人数</span>
                    <span>{{ item.totalPeopleNum }}</span>
                  </div>
                  <div class="reportRow">
                    <span>全勤人数</span>
                    <span>{{ item.fullAttePeopleNum }}</span>
                  </div>
                </el-row>
              </el-row>
              <!-- 每个折叠面板 内容部分 -->
            </template>
            <!-- 提示内容 报表部分 -->
            <div>
              <div class="before">
                <i class="el-icon-info" />
                迟到、早退和补签的统计单位为“次”；所有假期类型、外出、旷工的统计单位均为“天”。
              </div>
              <el-row type="flex" justify="end" style="padding:10px 0">
                <el-button type="primary" size="mini" @click="exporArchivingCont">导出</el-button>
              </el-row>
              <el-table
                :data="ArchivingCont"
                :header-cell-style="{ 'background-color': '#fafafa'}"
                height="300"
                border
              >
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="180"
                  align="center"
                />
                <el-table-column
                  prop="workNumber"
                  label="工号"
                  width="180"
                  align="center"
                />
                <el-table-column
                  prop="mobile"
                  label="手机号"
                  width="180"
                  align="center"
                />
                <el-table-column
                  prop="department"
                  label="部门"
                  width="180"
                  align="center"
                />
                <el-table-column
                  prop="leaveDays"
                  label="事假天数"
                  align="center"
                />
                <el-table-column
                  prop="dayOffLeaveDays"
                  label="调休天数"
                  align="center"
                />
                <el-table-column
                  prop="normalDays"
                  label="正常天数"
                  align="center"
                />
                <el-table-column
                  prop="laterTimes"
                  label="迟到次数"
                  align="center"
                />
                <el-table-column
                  prop="earlyTimes"
                  label="早退次数"
                  align="center"
                />
                <el-table-column
                  prop="absenceDays"
                  label="旷工天数"
                  align="center"
                />
                <el-table-column
                  prop="isFullAttendanceint"
                  label="是否全勤"
                  align="center"
                />
                <el-table-column
                  prop="actualAtteOfficialDays"
                  label="实际出勤天数（正式）"
                  width="180"
                  align="center"
                />
                <el-table-column
                  prop="workingDays"
                  label="应出勤工作日"
                  width="120"
                  align="center"
                />
                <el-table-column
                  prop="salaryOfficialDays"
                  label="计薪天数（正式）"
                  width="180"
                  align="center"
                />
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-row v-else class="without">
          该年份无归档报表
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getArchivingList, getArchivingCont } from '@/api/attendances'
export default {
  data() {
    return {
      year: '2021',
      activeNames: [],
      historyList: [], // 历史归档数据
      ArchivingCont: [] // 每月归档具体数据
    }
  },
  created() {
    this.getArchivingList()
  },
  methods: {
    // 获取 归档历史列表
    async getArchivingList() {
      this.historyList = await getArchivingList({
        year: this.year
      })
      // console.log(this.historyList)
    },
    // 根据归档历史id 获取对应归档详情数据
    async getArchivingCont(id) {
      if (id) {
        // 展开状态
        const res = await getArchivingCont({ atteArchiveMonthlyId: id })
        console.log(res)
        this.ArchivingCont = res
      } else {
        // 收回状态
        console.log('没有id')
      }
    },
    // 导出
    async exporArchivingCont() {
      // 这里是按钮被点击, 可以就在这里单独引入需要的库
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')
      // console.log(export_json_to_excel)

      const dict = {
        '姓名': 'name',
        '工号': 'workNumber',
        '手机号': 'mobile',
        '部门': 'department',
        '事假天数': 'leaveDays',
        '调休天数': 'dayOffLeaveDays',
        '正常天数': 'normalDays',
        '迟到次数': 'laterTimes',
        '早退次数': 'earlyTimes',
        '旷工天数': 'absenceDays',
        '是否全勤': 'isFullAttendanceint',
        '实际出勤天数(正式)': 'actualAtteOfficialDays',
        '应出勤工作日': 'workingDays',
        '计薪天数': 'salaryOfficialDays'
      }
      // console.log(Object.keys(dict))

      const ArchivingData = this.ArchivingCont.map(data => {
        return this.object2Arrayy(data, dict)
      })

      // console.log(ArchivingData)

      export_json_to_excel({
        header: Object.keys(dict),
        data: ArchivingData
      })
    },
    // 字典查询
    object2Arrayy(data, dict) {
      const newData = []
      for (const key in dict) {
        const enKey = dict[key]
        const value = data[enKey]
        newData.push(value)
      }
      return newData
    },
    // 日期选择器 选择不同年份的员工历史归档
    clooseYear(selectDate) {
      console.log(selectDate)
      const selectYear = new Date(selectDate).getFullYear() + ''
      console.log(selectYear)
      this.year = selectYear
      // 根据用户选择的年份 渲染该年份的员工历史归档
      this.getArchivingList()
    }
  }
}
</script>

<style>
.collapseItem{
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
  .el-collapse-item__header{
    border-bottom: 0px;
    line-height: 20px;
  }
</style>

<style lang="scss" scoped>
.historyTitle {
  border-bottom: 1px solid #ccc;
  .content {
    padding: 10px;
    font-weight: 700;
    color: #409eff;
    border-bottom: 2px solid #409eff;
  }
  .chooseYear {
    margin-bottom: 10px;
  }
}
.totalPeopleNum {
  margin-right: 20px;
}
.before {
  line-height: 34px;
  width: 100%;
  background-color: #fdf6ec;
  display: inline-block;
  padding: 0px 10px;
  border-radius: 3px;
  border: 1px solid #eaa28b;
  i {
    margin-right: 5px;
    color: #e6a23c;
  }
}
.el-table::before{
  height: 0;
}
.without{
  width :100%;
  height: 400px;
  line-height: 400px;
  text-align: center;
}
.reportRow{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 10px;
  text-align: center;
}
</style>
